<template>
	<view :style="{'--color':vuex_config.themeColor1}">
		<template v-if="!vuex_config.account_login">
			<u-mask :show="vuex_login" :duration="400" :zoom="false"
				:custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }">

				<view class="sww-login-box">
					<view class="clb-popup-box clb-popup-info">
						<view class="clb-popup-content">
							<view class="clb-info-avatar">
								<view class="clb-info-icon"></view>
							</view>
							<view class="clb-info-title">您还未登录</view>
							<view class="clb-info-desc">请先登录再进行此操作</view>
							<view class="clb-btn-list">
								<!-- #ifdef MP-ALIPAY -->
								<button class="clb-btn-item u-m-b-20" open-type="getAuthorize"
									@getAuthorize="getUserInfo" scope='userInfo'>
									立即登录
								</button>
								<!-- #endif -->

								<!--#ifdef MP-BAIDU	-->
								<button class="clb-btn-item" open-type="getUserInfo"
									@getuserinfo="getUserInfo">立即登录</button>
								<!--#endif-->

								<!--    #ifndef MP-ALIPAY || MP-BAIDU -->
								<button class="clb-btn-item " @click="getUserInfo"
									v-if="hasGetUserProfile == 1">立即登录</button>
								<button class="clb-btn-item" v-else-if="hasGetUserProfile == 2" open-type="getUserInfo"
									@getuserinfo="oldGetInfo">立即登录</button>
								<!--  #endif-->
								<button class="clb-btn-item" @click="closePopup(true)">暂不登录</button>
							</view>
							<!-- <view class="more_login" v-if="vuex_config.account_login">已有账号，点击登录</view> -->
						</view>
					</view>
				</view>

			</u-mask>
		</template>
		<u-mask v-else :show="vuex_login">
			<view style="width:100%;height:100%" @click="closePopup(true)"></view>
			<view class="account_main">
				<view class="title">{{isRegister?'注册':'登录'}}</view>
				<view class="acc_item">
					<view class="flex_box">
						<view class="input_icon iconfont iconfont-e640"></view>
						<u-input class="i_input" type="number" v-model="accountPhone" placeholder="请输入手机号"
							@blur="accountBlur">
						</u-input>
						<view :class="['input_tip_icon iconfont iconfont-e730',isRegister && mobileMsg == 1?'visi':'']">
						</view>
					</view>
					<view class="tip" v-show="mobileMsg && mobileMsg != 1">{{mobileMsg}}</view>
				</view>
				<view class="acc_item">
					<view class="input_icon iconfont iconfont-e6aa"></view>
					<u-input placeholder="请输入密码" class="i_input" v-model="password" type="password"></u-input>
				</view>
				<view :class="['acc_item',isRegister?'':'acc_item_hid']" v-if="">
					<view class="input_icon iconfont iconfont-e63f"></view>
					<u-input placeholder="请输入验证码" class="i_input" v-model="checkNum" type="number"></u-input>
					<view :class="['btn',mobileMsg == 1 && timer?'able_mnc':'']" @click="getCheckNum">
						{{timer?'获取验证码':Count+'秒'}}
					</view>
				</view>
				<view class="swit_main">
					<view class="switch_tap swit_l" @click="togetPassword">忘记密码</view>
					<view class="switch_tap swit_r" @click="changeAccount">{{isRegister?'已有账号，直接登录':'还没账号？立即注册'}}</view>
				</view>

				<view class="acc_btn" @click="submitAccount">{{isRegister?'立即注册':'立即登录'}}</view>

				<view class="quick_main">
					<view class="quick_head">
						<view class="line line_l"></view>
						<view class="quick_title">其他登录</view>
						<view class="line line_r"></view>
					</view>
				</view>
				<view class="quick_list">
					<button v-for="(item,index) in quickList" :key="index" :style="{color:item.color}"
						:class="['u-reset-button queick_item','iconfont',item.icon]" @click="getUserInfo"></button>
				</view>

			</view>
		</u-mask>
		<u-mask :show="phoneVisible" :duration="400" :zoom="false" :custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }">
			<view class="sww-login-box">
				<view class="clb-popup-box">
					<view class="clb-popup-content">
						<view class="clb-popup-title">授权获取手机号</view>
						<image class="clb-popup-avatar" :src="vuex_user.headimgurl"></image>
						<!--            #ifndef H5 || MP-ALIPAY  -->
						<view class="clb-popup-desc">申请获取您绑定的手机号</view>
						<button class="clb-phone-btn" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">确认</button>
						<!--            #endif-->
						<!--     #ifdef MP-ALIPAY -->
						<view class="clb-popup-desc">申请获取您绑定的手机号</view>
						<button class="clb-phone-btn" open-type="getAuthorize" scope="phoneNumber"
							@error="onPhoneAlipay" @getAuthorize="getPhoneNumber">确认</button>
						<!-- #endif-->
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		uniLogin,
		uniUserInfoZJ
	} from '../../utils/uniPromise';
	import {
		isMobile
	} from '@/utils/validate.js'
	import md5Libs from "@/uview-ui/libs/function/md5";
	import qs from 'qs';
	export default {
		data() {
			return {
				phoneVisible: false,
				singleInfo: {},
				openCheck: false,
				hasGetUserProfile: 0, // 1:可以用getUserProfile
				accountPhone: '', // 手机号
				password: '', // 密码
				checkNum: '', // 验证码
				mobileMsg: '', // 1:'可使用' 其他：错误信息
				timer: true, // 是否可以点击开启定时器
				Count: 60, // 倒计时
				isRegister: false, // 是否正在注册
				quickList: [{
					icon: 'iconfont-e606',
					color: '#3DAF34'
				}],
			};
		},
		computed: {
			...mapState(['vuex_user', 'vuex_superior', 'vuex_business', 'vuex_login']),
		},
		mounted() {
			//#ifdef MP-WEIXIN
			this.hasGetUserProfile = !uni.getUserProfile ? 2 : 1;
			// #endif
			//#ifndef MP-WEIXIN
			this.hasGetUserProfile = 1;
			// #endif
		},
		methods: {
			...mapActions(['loadBusinessInfo', 'loadUserInfo', 'checkIsUpdateSuperior']),
			/**
			 * (旧版本)获取用户信息
			 */
			oldGetInfo(e) {
				if (!uni.getUserProfile) {
					// 兼容PC、一些低版本
					this.$loading('正在登录');
					this.loadUserInfoByCode(e.detail);
					this.closePopup();
				}
			},
			getUserInfo(e) {
				this.$u.debounce(
					() => {
						let $this = this
						//#ifdef MP-WEIXIN
						if (uni.getUserProfile) {
							//判断是否有这个方法
							uni.getUserProfile({
								desc: '获取用户头像',
								lang: 'zh_CN',
								success: detail => {
									console.log('成功');
									this.$loading('正在登录');
									this.loadUserInfoByCode(detail);
									this.closePopup();
								},
								fail: err => {
									this.closePopup(true);
								}
							});
						}
						// #endif
						// #ifdef APP-PLUS
						// if (this.vuex_config.withdraw_explain == 88) {
						// 	this.$linkTo(`/package/common/login`)
						// 	this.closePopup(true);
						// } else {
						this.$loading('正在登录');
						uni.login({
							provider: 'weixin',
							success: loginRes => {
								console.log('loginRes', loginRes)
								uni.getUserInfo({
									provider: 'weixin',
									success: res => {
										this.loadUserInfoByCode(res.userInfo, loginRes
											.authResult);
										this.closePopup();
									},
									fail: err => {
										this.$hide();
										this.closePopup(true);
									}
								});
							},
							fail: err => {
								this.$hide();
								console.log(err);
								this.closePopup(true);
							}
						});
						// }
						// #endif
						// #ifdef H5
						this.$u.vuex('vuex_login_back_url', this.$route.fullPath);
						this.$linkTo('/package/common/auth/index', 'redirectTo');
						// #endif

						// #ifdef MP-ALIPAY
						my.getOpenUserInfo({
							success: res1 => {
								let userInfo = JSON.parse(res1.response).response; // 以下方的报文格式解析两层 response
							
								this.loadUserInfoByCode(userInfo);
								this.closePopup();
							}
						});
						// #endif



						// #ifdef MP-BAIDU	
						if (e.detail.errMsg === 'getUserInfo:ok') { //用户同意授权
							this.loadUserInfoByCode(e.detail)
							this.closePopup()
						}
						// #endif

						//#ifdef MP-TOUTIAO
						// 抖音必须调用了login成功后调用获取用户信息
						tt.login({
							success() {
								uniUserInfoZJ().then(detail => {
									$this.$loading('正在登录');
									$this.loadUserInfoByCode(detail);
									$this.closePopup();
								})
							},

						});
						// #endif

					},
					800,
					true
				);


			},
			/**
			 * 从服务端获取商家、用户信息
			 * @param userInfo
			 */
			// #ifdef MP-WEIXIN || MP-TOUTIAO	
			loadUserInfoByCode(detail) {
				let {
					userInfo
				} = detail;
				this.loadBusinessInfo()
					.then(res => {
						console.info('微信登录第一步，成功获取商家信息：', res);
						return uniLogin();
					})
					.then(res => {
						console.info('微信登录第二步，成功获取code：', res.code);
						// return new Promise().reject()
						// #ifdef  MP-TOUTIAO	
						let url = 'GetTiktokOpenID'
						// #endif 

						// #ifndef  MP-TOUTIAO
						let url = 'GetUsersSmallRoutineByOpenID'
						// #endif 


						return this.$resPost(url, {
							code: res.code,
							appid: this.vuex_business.appid,
							secret: this.vuex_business.secret,
							nickname: userInfo.nickName,
							headimgurl: userInfo.avatarUrl
						});
					})
					.then(({
						data
					}) => {
						this.singleInfo = {
							...data
						};
						console.log('第三步:没有注册就注册，已经注册了就刷新信息', this.singleInfo);
						let str = (userInfo.province || '') + ',' + (userInfo.city || '');
						return this.$resPost('AddSmallRoutineUsers', {
							business_id: this.$store.state.vuex_business.pk_id,
							// #ifdef  MP-TOUTIAO	
							openid: this.singleInfo.openid,
							// #endif 
							// #ifndef  MP-TOUTIAO
							openid: this.singleInfo.small_routine,
							// #endif 
							unionid: this.singleInfo.unionid || '',
							address: str,
							sex: userInfo.gender || 0,
							superior: this.vuex_superior || 0,
							nickname: userInfo.nickName,
							headimgurl: userInfo.avatarUrl
						});
					})
					.then(res => {
						console.info('保存用户信息,查询购物车信息：', res);
						return this.loadUserInfo(res.data);
					})
					.then(res => {
						this.$hide();
						this.checkIsUpdateSuperior(this.vuex_superior);
						console.info('微信登录第四步，检查是否绑定手机号：', res.mobile);
						if (!res.mobile) {
							// #ifdef  MP-TOUTIAO	 
							// 未开通手机权限，需要开通
							this.loginSuccess();
							// #endif 
							// #ifdef  MP-WEIXIN	
							this.showPopup('phoneVisible');
							// #endif 
						} else {
							this.loginSuccess();
						}
					})
					.catch(err => {
						this.$hide();
						console.log(err);
					});
			},
			// #endif
			// #ifdef APP-PLUS
			loadUserInfoByCode(userInfo, loginRes) {
				console.log('微信登录第一步，获取微信openId和用户信息：');
				this.$loading('正在登录');
				this.loadBusinessInfo()
					.then(() => {
						console.info('微信登录第二步，成功获取商家信息：');
						console.log('第三步:没有注册就注册，注册了就刷新信息', userInfo);
						let str = (userInfo.province || '') + ',' + (userInfo.city || '');
						return this.$resPost('AddThirdPartyRegistration', {
							business_id: this.$store.state.vuex_business.pk_id,
							openid: loginRes.openid,
							unionid: loginRes.unionid || '',
							address: str,
							sex: userInfo.gender || 0,
							superior: this.vuex_superior || 0,
							nickname: userInfo.nickName,
							headimgurl: userInfo.avatarUrl
						});
					})
					.then(res1 => {
						console.info('保存用户信息,查询购物车信息：', res1.data);
						return this.loadUserInfo(res1.data);
					})
					.then(res => {
						this.$hide();
						this.loginSuccess();
						return;
					})
					.catch(err => {
						this.$hide();
						console.log(err);
					});
			},
			// #endif


			// #ifdef MP-ALIPAY
			loadUserInfoByCode(detail) {
				let userInfo = detail;
				console.log(userInfo, 'userInfo')
				this.$loading('正在登录');
				this.loadBusinessInfo()
					.then(res => {
						console.info('微信登录第一步，成功获取商家信息：', res);
						return uniLogin();
					})
					.then(res => {
						// console.log(res, 'rrr')
						console.info('微信登录第二步，成功获取code：', res.code);
						return this.$resPost('GetAlipayUsersID', {
							code: res.code,
							appid: this.vuex_business.appid
						});
					})
					.then(({
						data
					}) => {
						this.singleInfo = {
							...data
						};
						console.log('第三步:没有注册就注册，注册了就刷新信息', this.singleInfo);
						let str = (userInfo.province || '') + ',' + (userInfo.city || '');
						return this.$resPost('AddThirdPartyRegistration', {
							business_id: this.$store.state.vuex_business.pk_id,
							openid: this.singleInfo.openid,
							unionid: this.singleInfo.unionid || '',
							address: str || '未设置',
							sex: userInfo.gender == 'm' ? 1 : userInfo.gender == 'f' ? 2 :
							0, //m 男  f 女 其他就是保密了
							superior: this.vuex_superior || 0,
							nickname: userInfo.nickName || '未设置',
							headimgurl: userInfo.avatar || '未设置'
						});
					})
					.then(res => {
						console.info('保存用户信息,查询购物车信息：', res);
						return this.loadUserInfo(res.data);
					})
					.then(res => {
						this.$hide();
						this.checkIsUpdateSuperior(this.vuex_superior);
						console.info('微信登录第四步，检查是否绑定手机号：', res.mobile);
						if (!res.mobile) {
							// this.showPopup('phoneVisible'); //未接通手机权限
							this.loginSuccess();
						} else {
							this.loginSuccess();
						}
					})
					.catch(err => {
						this.$hide();
						console.log(err);
					});
			},

			// 支付宝获取授权手机拒绝后
			onPhoneAlipay() {
				this.loginSuccess();
			},
			// #endif

			/**
			 * 关闭登录弹框
			 * bol: 是否点击了暂不登录,如果是，就把监听事件去掉，并执行不登录回调
			 */
			closePopup(bol) {
				this.$u.vuex('vuex_login', false);
				if (bol) {
					uni.$off('loginSuccess');
					this.loginFail();
				} else {
					uni.$off('loginFail');
				}
				this.phoneVisible = false;
			},
			/**
			 * 获取手机号码
			 */
			getPhoneNumber(e) {
				console.log(e)
				this.closePopup();
				//  #ifdef MP-ALIPAY
				my.getPhoneNumber({
					success: res => {
						let encryptedData = res.response;
						console.log(res)
					},
					fail: res => {
						console.log(res);
					}
				});
				// #endif
				//  #ifndef MP-ALIPAY
				this.$nextTick(() => {
					if (e.detail.errMsg === 'getPhoneNumber:ok') {
						//同意授权获取手机号

						this.loadPhoneNumber(e.detail);
					} else {
						//拒绝授权
						this.loginSuccess();
					}
				});
				// #endif
				console.log(e)
			},
			/**
			 * 从服务端解密用户手机号
			 */
			// #ifdef MP-WEIXIN
			loadPhoneNumber(detail) {
				this.$loading();
				this.$resPost(
						'SmallProgramDecryption', {
							iv: encodeURIComponent(detail.iv),
							session_key: encodeURIComponent(this.singleInfo.session_key)
						},
						detail.encryptedData
					)
					.then(({
						data
					}) => {
						return this.$resPost('SetUsersWebchat', {
							pk_id: this.vuex_user.fk_users_id,
							mobile: data
						});
					})
					.then(() => {
						this.$hide();
						this.loginSuccess();
					})
					.catch(() => {
						this.$hide();
						this.loginSuccess();
					});
			},
			// #endif

			// #ifdef MP-BAIDU
			loadUserInfoByCode(detail) {
				let {
					userInfo,
					iv,
					encryptedData
				} = detail
				this.$loading('正在登录')
				this.loadBusinessInfo().then(res => {
					console.info('百度登录第一步，获取商家信息：')
					console.log(res);
					return uniLogin()
				}).then((res) => {
					console.info('百度登录第二步，获取code：')
					console.log(res.code);
					return this.loadBaiduUserInfo(res.code, iv, encryptedData)
				}).then(res => {

					this.singleInfo = res
					console.info('百度登录第三步，获取用户基础信息222：')
					console.log(this.singleInfo, '用户信息');
					return this.$resPost('AddSmallRoutineUsers', {
						openid: res.openid,
						unionid: '',
						address: '',
						superior: this.vuex_superior || 0,
						nickname: userInfo.nickName,
						headimgurl: userInfo.avatarUrl
					})
				}).then(res => {
					console.info('百度登录第四步，获取注册用户信息：')
					console.log(res, '第四步');
					return this.loadUserInfo(res.data)
				}).then(res => {
					this.$hide()
					console.info('百度登录第五步，获取完整用户信息：')
					console.log(res);
					// this.loginSuccess()
					// if (!res.phone) {
					// 	this.showPopup('phoneVisible')
					// } else {
					this.loginSuccess()
					// }
				}).catch((err) => {
					this.$hide()
					console.log(err);
				})
			},


			loadBaiduUserInfo(code, iv, data) {
				return new Promise((resolve, reject) => {
					this.$resPost('GetBaiduOpenid', {
						code,
						appid: this.vuex_business.appid
					}).then(res => {

						resolve(JSON.parse(JSON.parse(res.data.openid)))

					}).catch(() => {
						reject()
					})
				})
			},

			loadBaiduPhone(code, iv, data) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `https://baidumini.kailly.com/ApiBaidu/GetPhone${qs.stringify({
			        js_code: code,
			        iv,
			        data
			      }, {addQueryPrefix: true})}`,
						method: 'POST',
						data: {},
						timeout: 6000,
						header: {
							'content-type': 'application/json; charset=utf-8'
						},
						success(res) {
							resolve(res.data)
						},
						fail(res) {
							reject(res)
						}
					})
				})
			},
			// #endif
			// 切换登录、注册
			changeAccount() {
				this.mobileMsg = ''
				this.accountPhone = ''
				this.checkNum = ''
				this.isRegister = !this.isRegister
			},
			togetPassword() {
				this.closePopup()
				this.$linkTo('/package/common/login')
			},
			// 账号失去焦点
			accountBlur() {
				// 如果改变了呢
				if (!isMobile(this.accountPhone)) {
					this.mobileMsg = '请输入正确的手机号'
				} else if (this.isRegister) {
					// 注册时验证手机号是否已被使用
					this.$resPost('VerifyPhoneRegister', {
						phone: this.accountPhone
					}).then((res) => {
						if (res.data == 1) {
							this.mobileMsg = '号码已注册，请更换号码！'
						} else {
							this.mobileMsg = 1
						}
					}).catch(() => {
						this.mobileMsg = '请重新输入'
					})
				} else {
					this.mobileMsg = 1
				}
			},
			// 点击获取验证码
			getCheckNum() {
				if (this.timer && this.mobileMsg == 1) {
					this.timer = false
					this.setTime();
					this.$resPost('SendSMSVerificationCode', {
						phone: this.accountPhone,
						type: 2
					})
				}
			},
			//倒计时
			setTime() {
				let Count = this.Count
				if (Count <= 0) {
					this.Count = 60,
						this.timer = true
					return
				}
				setTimeout(() => {
					this.Count = Count - 1
					this.setTime();
				}, 1000);
			},
			submitAccount() {
				if (this.mobileMsg != 1) {
					return
				}
				if (this.password.length < 6) {
					this.$toast({
						title: '密码长度不能小于6',
						duration: 800
					})
					return
				}
				if (this.isRegister) {
					if (!this.checkNum) {
						this.$toast({
							title: '请输入验证码',
							duration: 800
						})
						return
					}
					this.startRegister()
				} else {
					this.subAccountLogin()

				}
			},
			// 账号注册
			startRegister() {
				this.$loading()
				uni.login({
					provider: 'weixin',
					// onlyAuthorize:true,
					success: loginRes => {
						console.log('loginRes', loginRes)
						let obj = {
							openid: loginRes.authResult.openid,
							unionid: loginRes.authResult.unionid || '',
						}
						this.requestRegister(obj)
					},
					fail: err => {
						console.log('关联微信失败', err);
						this.requestRegister()
						// this.$hide();
						// this.closePopup(true);
					}
				});
			},
			requestRegister(obj = {}) {
				let params = {
					phone: this.accountPhone,
					password: md5Libs.md5(this.password),
					code: this.checkNum,
					...obj
				}
				this.$resPost('ByPhoneRegisteredUsers', params).then(({
					data
				}) => {
					console.log('data', data)
					if (data > 0) {
						this.$u.vuex('vuex_token', data);
						this.loadUserInfo().then(() => {
							this.$hide()
							this.closePopup()
							this.loginSuccess()
						})
					} else {
						this.$hide()
						this.$toast('错误')
					}
				})

			},
			// 账号登录
			subAccountLogin() {
				let params = {
					username: this.accountPhone,
					password: this.password
				}
				this.$loading()
				this.$resPost('GetUsersLogin', params).then(({
					data
				}) => {
					this.$u.vuex('vuex_token', data);
					this.loadUserInfo().then(() => {
						this.$hide()
						this.closePopup()
						this.loginSuccess()
					})
				})
			},
			/**
			 *
			 */
			showPopup(type = 'userInfoVisible') {
				this[type] = true;
				this.disableBtn = false;
			},

			/**
			 * 登录成功
			 */
			loginSuccess() {
				uni.$emit('loginSuccess');
			},
			/**
			 * 暂不登录
			 */
			loginFail() {
				uni.$emit('loginFail');
			},
		}
	};
</script>
<style lang="scss" scoped>
	botton::after {
		border: 0 !important;
	}

	.sww-login-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.clb-popup-box {
			width: 626rpx;
			position: relative;
		}

		.clb-popup-content {
			width: 100%;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 47rpx;
			border-radius: 16rpx;
		}
	}



	// 获取手机号弹窗开始
	.clb-popup-title {
		padding-top: 40rpx;
		font-size: 28rpx;
	}

	.clb-popup-avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 40rpx 0;
		background-size: 100%;
	}

	.clb-popup-desc {
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
		border: 0 !important;
	}

	.clb-phone-btn {
		background-color: #6cadff;
		color: #ffffff;
		width: 100%;
		height: 82rpx;
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		border-radius: 41rpx;
		margin: 50rpx 0 30rpx;
	}

	.clb-phone-btn::after {
		border: 0 !important;
	}

	// 获取手机号弹窗开始
	/*用户登录*/
	.clb-popup-info {
		padding-top: 124rpx;

		.clb-popup-content {
			padding-top: 188rpx;
		}

		.clb-info-avatar {
			padding: 20rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
			background-color: #ffffff;
		}

		.clb-info-icon {
			width: 276rpx;
			height: 276rpx;
			background-size: 100%;
			background-image: url('');
		}

		.clb-info-title {
			font-size: 34rpx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.clb-info-desc {
			font-size: 28rpx;
			color: #999999;
			font-weight: 400;
		}

		.clb-btn-list {
			width: 100%;
			padding: 50rpx 0 30rpx;
		}

		.clb-btn-item {
			width: 100%;
			height: 82rpx;
			border-radius: 41rpx;
			background-color: #6cadff;
			margin: 0;
			padding: 0;
			font-size: 30rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			color: #ffffff;
		}

		.clb-btn-item:after {
			border: none;
		}

		.clb-btn-item:last-child {
			background-color: inherit;
			color: #6caeff;
		}
	}

	// .more_login {
	// 	text-decoration: underline;
	// 	color: #6cadff;
	// 	font-size: 24rpx;
	// 	text-align: center;
	// 	padding-bottom: 28rpx;
	// }
	.account_main {
		position: absolute;
		background-color: #fff;
		padding: 0 80rpx 20rpx;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.title {
			font-size: 34rpx;
			padding-top: 32rpx;
		}

		.acc_item {
			border-bottom: 1rpx solid #e6e6e6;
			margin-top: 36rpx;
			position: relative;
			padding-bottom: 6rpx;
			display: flex;
			align-items: center;

			.flex_box {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			.input_icon {
				color: #888888;
				font-size: 32rpx;
				margin-right: 30rpx;
			}

			&.acc_item_hid {
				visibility: hidden;
			}

			.input_tip_icon {
				margin-left: 16rpx;
				color: var(--color);
				visibility: hidden;

				&.visi {
					visibility: visible;
				}
			}

			.tip {
				color: #f05b29;
				position: absolute;
				line-height: 40rpx;
				bottom: -40rpx;
				left: 0;
				font-size: 22rpx;
			}

			.i_input {
				flex: 1;
				overflow: hidden;
				padding-top: 8rpx;
				font-size: 30rpx;
				width: 100%;
			}
		}

		.btn {
			padding: 10rpx 20rpx;
			border: 1rpx solid #D7D7D7;
			background: #fff;
			color: #888888;
			font-size: 28rpx;
			width: 190rpx;
			text-align: center;
			margin-left: 16rpx;

			&.able_mnc {
				border-color: var(--color);
				color: var(--color);
			}
		}

		.swit_main {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.switch_tap {
				text-align: right;
				color: #9B9B9B;
				font-size: 24rpx;
				margin-top: 40rpx;

				&.swit_l {
					color: #7CAAF7;
				}
			}
		}

		.acc_btn {
			width: 400rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background-color: #7CAAF7;
			margin: 60rpx auto 0;
			border-radius: 50rpx;
			font-size: 32rpx;
		}

		.quick_main {
			margin-top: 56rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			.quick_head {
				position: relative;

				.line {
					width: 146rpx;
					border-top: 1px solid #9B9B9B;
					height: 0;
					position: absolute;
					top: 50%;
					transform: translateY(-50%) scaleY(0.5);

					&.line_l {
						right: 168rpx;
					}

					&.line_r {
						left: 168rpx;
					}
				}

				.quick_title {
					width: 168rpx;
					color: #9B9B9B;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}

		.quick_list {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;

			.queick_item {
				font-size: 60rpx;
				color: #1890FF;
				padding: 0 20rpx;
			}
		}
	}
</style>
